<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport">
<title>快豆中心</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css?t=2">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/reset.js"></script>
</head>
<body>
	<div id="app">
		<!-- 加载中  在loading属性标签中添加class属性show显示加载中 -->
		<div class="loading" v-if="false">
			<img src="img/loading.gif" ><span>加载中</span>
		</div>
		<!-- 刚进入页面的导航 -->
        <div class="mask" v-if="pointGuide">
            <div class="point">
                
                <div class="line"><img alt="img/line.png" src=""></div>
                <p>签到获得快豆，可抵钱用，购物无忧</p>
                <div class="know" @click="exitPointGuide">我知道了</div>
            </div>
        </div>
		<!-- 我的快豆 规则说明 -->
		<div class="all-coin-today center">
			<div class="top center btn-linner-bgc">
				<!-- 我的所有快豆 -->
				<div class="all-coin">
					<div class="coin-rules center">
						<a href="account.html" class="title">我的快豆<img class="right-arrow" src="./img/right-arrow.png" alt=""></a>
						
					</div>
					<p class="count" style="font-size: 1.5rem;">{{points_total_num}}</p>
				</div>
				<!-- 今日快豆 -->
				<div class="today-coin">
					<p class="title">今日快豆</p>
					<p class="count">
						{{points_today_num_mark}}<span style="font-size: 1.5rem;">{{points_today_num}}</span>
					</p>
				</div>
			</div>
			<!-- 规则说明 -->
			<p class="rules bgc" @click="showRule">
				规则说明
			</p>
		</div>
		<!-- 签到 -->
		<div class="clock ml mr br bgc">
			<div class="title center">
				<div class="left">
					已连续签到<span class="fontc">{{sign_days}}天</span>
				</div>
				<div class="right font-min fontc-gray">连续签到有额外的奖励！</div>
			</div>
			<!--签到7天日期列表 -->
			<ul v-show="signDaysWeek" class="items center">
				<li class="item" v-for="(sign,index) in sign_datas" v-bind:class="{active:sign.hasSign}" v-if="index<7">
					<div class="cover br">
						<div class="count">{{sign.value}}</div>
						<div class="coin">
							<img src="img/coin2.png" alt="" v-if="sign.hasSign">
							<img src="img/coin1.png" alt="" v-else>
						</div>
					</div>
					<div class="day" v-if="sign.hasSign">已签</div>
					<div class="day" v-else>{{sign.index}}天</div>
				</li>
			</ul>
			<!-- 28天 -->
			<ul v-show="!signDaysWeek" class="items center">
				<li class="item" v-for="(sign,index) in sign_datas" v-bind:class="{active:sign.hasSign}">
					<div class="cover br">
						<div class="count">{{sign.value}}</div>
						<div class="coin">
							<img src="img/coin2.png" alt="" v-if="sign.hasSign">
							<img src="img/coin1.png" alt="" v-else>
						</div>
					</div>
					<div class="day" v-if="sign.hasSign">已签</div>
					<div class="day" v-else>{{sign.index}}天</div>
				</li>
			</ul>
			<!-- 点击进行签到 -->
			<div v-if="!sign_today" class="clock-btn btn-linner-bgc" @click="confirmSign">立即签到</div>
			<!-- 签到成功弹窗 -->
			<div class="clock-dialog"></div>
			<!-- 点击展开全部日期 -->
			<div v-show="signDaysWeek" class="open center" @click="showSignDays">
				<img src="img/sign-down-arrow.png" alt="">
			</div>
			<div v-show="!signDaysWeek" class="close center" @click="showSignDays">
				<img src="img/sign-top-arrow.png" alt="">
			</div>
		</div>
		<!-- 提醒签到 -->
		<div v-if="signConfirm" class="mask">
			<div class="toast-clock">
				<div class="cover">
					<img src="img/sign.png" alt="">
				</div>
				<div class="btn btn-linner-bgc br" @click="doSign">快收下快豆</div>
				<div class="toast-clock-close" @click="exitSign">
					<img class="close" src="img/close.png" alt="">
				</div>
			</div>
		</div>
		<!-- 签到成功 -->
		<div v-if="signSuccess" class="mask">
			<div class="success-clock">
				<div class="coin">
					获得<span style="margin: 0 2rem; font-size: 1.5rem;">20</span>快豆
				</div>
				<div class="text-info">
					连续<span class="fontc">{{sign_days}}</span>天签到成功
				</div>
				<div class="btn btn-linner-bgc" @click="closeSignSuccess">收下快豆</div>
				<div class="success-clock-close" @click="closeSignSuccess">
					<img src="img/close.png" class="close" alt="">
				</div>
			</div>
		</div>

		<!-- 商品列表 -->
		<div class="goods ml mr">
			<!-- 头部标题 -->
			<div class="title center">
				<div class="name">快豆抵钱</div>
				<a href="order.html" class="log font-min fontc-gray">
					兑换记录<img class="right-arrow" style="width: 0.3rem;" src="./img/right-arrow2.png" alt="">
				</a>
			</div>
			<!-- 商品列表 -->
			<div class="wrap center">
				<!-- 加上over则显示已抢光 over tag   [span]class="tag-del" -->
				<div class="item bgc br" v-for="prod in prod_datas" :date-id="prod.id" v-on:click="showProdDetail($event)">
					<div class="cover">
						<img :src="prod.pic" alt="">
						<div class="over-wrap">
							<div class="line line-top"></div>
							<div>已抢光</div>
							<div class="line line-bottom"></div>
						</div>
					</div>
					<div class="content">
						<div class="name">{{prod.name}}</div>
						<div class="price-tag">
							<div class="price fontc">
								￥<span style="font-size: 1rem;">{{prod.moneyLeft}}</span>
								<span v-if="prod.moneyRight!='00'">.{{prod.moneyRight}}</span>
								<span v-if="prod.pointValue!=0">
									<span style="margin: 3px;">+</span><span>{{prod.pointValue}}快豆</span>
								</span>
							</div>
							<div class="tag-wrap font-min">已兑换</div>
						</div>
						<p class="selling-price fontc-gray font-min">
							在售价：
							<del>￥{{prod.price/100}}</del>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 我是有底线的 -->
		<div class="no-more fontc-gray font-min">
			<p>
				<img src="" alt="">我是有底线的~
			</p>
		</div>
		<!-- 规则明细 -->
		<div v-show="rulesDialog" class="mask">
			<div class="rules-dialog bgc br">
				<p class="title mt mb">什么是快豆？</p>
				<p>快豆是您在快付的“资产”。</p>
				<p>积累到一定的快豆，可抵钱用。</p>
				<p class="title mb" style="margin-top: 1.5625rem;">快豆有哪些规则？</p>
				<p>1.可以通过每日签到获得快豆;</p>
				<p>2.每周一签到会有超级奖励;</p>
				<p>3.首次进入可获得20快豆，每天签到时领取一次，不可补签;</p>
				<p>4.获得的快豆自动发放到快豆账户中，可在“快豆明细”中查看;</p>
				<p>5.若有操作快豆抵扣，将会扣除相应的快豆数量，可在“快豆明细”中查看;</p>
				<p>6.快豆抵扣后请尽快使用，若商品抢完，则抵扣的快豆将无法退还;</p>
				<p>7.本活动解释权归杭州快付传媒网络科技有限公司。</p>
				<div class="know-btn btn-linner-bgc" @click="closeRule">我知道了</div>
			</div>
		</div>
	</div>
	
<script>
var vm = new Vue({
	el:'#app',
	data:{
		points_total_num: 0,
		points_today_num: 0,
		points_today_num_mark: '',
		
		sign_today: true,
		sign_days: 0,
		sign_datas: [
			{"index":1, "value":0, "hasSign":false},
			{"index":2, "value":0, "hasSign":false},
			{"index":3, "value":0, "hasSign":false},
			{"index":4, "value":0, "hasSign":false},
			{"index":5, "value":0, "hasSign":false},
			{"index":6, "value":0, "hasSign":false},
			{"index":7, "value":0, "hasSign":false}
		],
		
		rulesDialog: false,
		pointGuide: false,
		signDaysWeek: true,
		signConfirm: false,
		signSuccess: false,
		
		prod_page_no: 1,
		prod_page_number: 1,
		prod_page_total: 6,
		prod_datas: [
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"},
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"},
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"},
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"},
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"},
			{"id":"", "name":" ", "price":0, "giftMoney":0, "pointValue":0, "pic":"img/prod.png"}
		],
		
		load_lock: false
    },
    methods:{
    	//查看规则
    	showRule(){
    		this.rulesDialog = true;
    	},
    	//关闭规则
    	closeRule(){
    		this.rulesDialog = false;
    	},
    	//退出签到指引
    	exitPointGuide(){
    		this.pointGuide = false;
    	},
    	//签到确认提示
    	confirmSign(){
    		this.signConfirm = true;
    	},
    	//签到
    	doSign(){
    		doSignIn();
    	},
    	//退出签到
    	exitSign(){
    		this.signConfirm = false;
    	},
    	//关闭签到成功提示层
    	closeSignSuccess(){
    		
    	},
    	//是否显示28天签到
    	showSignDays(){
    		this.signDaysWeek = !this.signDaysWeek;
    	},
    	//跳转商品详情
    	showProdDetail(event){
    		showProdPage(event.currentTarget);
    	}
    }
});

init();
//初始化
function init(){
	if(localStorage.getItem("token")==null || localStorage.getItem("token")==''){
		alert('这里需要跳到错误页面');
		return;
	}
	
	if(sessionStorage.getItem("points.account")==null || sessionStorage.getItem("points.account")==''){
		queryPoints();
	}else{
		cachedPoints();
	}
	if(sessionStorage.getItem("points.sign")==null || sessionStorage.getItem("points.sign")==''){
		querySignIn();
	}else{
		cachedSignIn();
	}
	queryPage();
}

//查询积分值
function queryPoints(){
	$.post("../api/account/query", {"token":localStorage.getItem("token")}, function(data){
		if(data.retCode){
			var json = data.result;
			sessionStorage.setItem("points.account", JSON.stringify(json));
			cachedPoints();
		}
	});
}
function cachedPoints(){
	var json = JSON.parse(sessionStorage.getItem("points.account"));
	vm.points_total_num = json.total;
	vm.points_today_num = json.today<0?json.today*-1:json.today;
	vm.points_today_num_mark = json.today>0?'+':json.today<0?'-':'';
}
//查询签到
function querySignIn(){
	$.post("../api/signin/index", {"token":localStorage.getItem("token")}, function(data){
		if(data.retCode){
			var array = data.result;
			sessionStorage.setItem("points.sign", JSON.stringify(array));
			cachedSignIn();
		}
	});
}
function cachedSignIn(){
	var array = JSON.parse(sessionStorage.getItem("points.sign"));
	vm.sign_datas = array;
	var todaySign;
	for(var i=0; i<array.length; i++){
		if(array[i].isToday==1){
			todaySign = array[i];
			break;
		}
	}
	vm.sign_days = todaySign.hasSign?todaySign.index:todaySign.index-1;
	vm.sign_today = todaySign.hasSign;
	vm.pointGuide = !todaySign.hasSign;
}

//签到
function doSignIn(){
	$.post("../api/signin/sign", {"token":localStorage.getItem("token")}, function(data){
		if(data.retCode){
			var json = data.result;
			vm.sign_days = json.num;
			vm.sign_today = true;
			vm.signConfirm = false;
			
			vm.sign_datas[json.num-1].hasSign = true;
			
			//签到28天数据存入缓存
			var array = JSON.parse(sessionStorage.getItem("points.sign"));
			array[json.num-1].hasSign = true;
			sessionStorage.setItem("points.sign", JSON.stringify(array));
			
			//账户数据存入缓存
			var account = JSON.parse(sessionStorage.getItem("points.account"));
			account.total = account.total + json.value;
			account.today = account.today + json.value;
			sessionStorage.setItem("points.account", JSON.stringify(account));
			cachedPoints();
		}
	});
}
//商品列表
function queryPage(){
	$.post("../api/prod/list", {"token":localStorage.getItem("token"), "no":vm.prod_page_no}, function(data){
		if(data.retCode){
			var page = data.result;
			vm.prod_datas = page.data;
			vm.prod_page_no = page.no;
			vm.prod_page_number = page.number;
			vm.prod_page_total = page.count;
		}
	});
}
//商品详情
function showProdPage(e){
	var id = $(e).attr("date-id");
	location.href = "detail.html?prodId="+id;
}

$(window).scroll(function(){
	if($(window).scrollTop() >= ($(document).height() - $(window).height()-10)){
		if(vm.load_lock){
			return;
		}
    	var _newPageNo = vm.prod_page_no + 1;
    	if(_newPageNo<=vm.prod_page_number){
    		vm.load_lock = true;
    		$.post("../api/prod/list", {"token":localStorage.getItem("token"), "no":_newPageNo}, function(data){
    			vm.load_lock = false;
    			if(data.retCode){
    				var page = data.result;
    				vm.prod_page_no = page.no;
    				vm.prod_page_number = page.number;
    				vm.prod_page_total = page.count;
    				
    				var existArray = vm.prod_datas;
    				var _array = page.data;
    				var newArray = existArray.concat(_array);
    				vm.prod_datas = newArray;
    			}
    		});
    	}
    }
});
</script>
</body>
</html>